<style lang="less">
// @import "../../../styles/table-common.less";
</style>
<template>
  <div class="searche">
    <Card>
      <!-- <div class="edit-head">
        <span
          @click="Contrgo"
          class="back-title"
          style="18px;margin-left:17px;cursor:pointer;"
        >
          <Icon style="font-size: 20px" type="ios-arrow-back" />
        </span>
      </div> -->
      <Row>
        <Col flex="auto">
          <div v-if="this.gettation.length == 0" class="Menucss MenuItemCss">
            &nbsp; 暂无数据 &nbsp;
          </div>
          <div v-else>
            <Menu
              width="200px"
              v-if="MenuaOne"
              @on-select="MenuItclck"
              class="Menucss"
            >
              <MenuItem
                class="MenuIspan"
                @on-dblclick="dblclicktew"
                v-for="item in gettation"
                :key="item"
                :name="item.id"
              >
                {{ item.categoryMess }}
              </MenuItem>
            </Menu>
          </div>
        </Col>
        <Col flex="auto">
          <div v-if="this.secondLevel.length == 0" class="Menucss MenuItemCss">
            &nbsp; 暂无数据 &nbsp;
          </div>
          <div v-else>
            <Menu
              width="200px"
              v-if="Menutwo"
              @on-select="MenuIsecond"
              class="Menucss MenuItemCss"
            >
              <MenuItem
                class="MenuIspan"
                v-for="item in secondLevel"
                :key="item"
                :name="item.id"
              >
                {{ item.custMess }}
              </MenuItem>
            </Menu>
          </div>
        </Col>
        <!-- <div>
          <Menu>
            <Submenu
              :name="item.id"
              v-for="(item, index) in gettation"
              :key="index"
            >
              <template slot="title">
                <Icon type="ios-paper" />
                {{ item.categoryMess }}
              </template>
               <MenuItem
                  :name="tou.id"
                  v-for="(tou, index) in secondLevel"
                  :key="index"
                >
                  {{ tou.custMess }}
                </MenuItem>
            </Submenu>
          </Menu>
        </div> -->
        <Col flex="auto">
          <div class="iframe-css">
            <iframe
              style="border: 0"
              :src="this.htmls"
              height="680"
              width="100%"
              name="demo"
              scrolling="auto"
              sandbox="allow-same-origin"
            ></iframe>
          </div>
        </Col>
      </Row>
    </Card>
  
  </div>
</template>

<script>
import { getMsgCustCategoryList, getMsgCustMessIdList } from "@/api/index";
import userChoose from "@/views/my-components/freight/user-choose";
export default {
  components: {
    userChoose,
  },
  title: "message-kefu",
  data() {
    return {
      Ruletitle: "",
      Ruleimod: false,

      editortoew: false,
      Menutwo: false,
      MenuIon: 1,
      deletetow: true,
      categoryone: "",
      categorytwo: "",
      modify: true,
      classA: true,
      Secondary: true,
      secondLe: false,
      editorContent: "",
      newlyAdded: false,
      titleNew: "新增一级",
      MenuItclckId: "",
      custMenuI: "",
      // 一级
      formadd: {
        categoryMess: "",
        sort: 0,
        categoryType: "",
      },
      ruleadd: {
        categoryMess: [
          {
            required: true,
            message: "请输入类目信息",
            trigger: "blur",
          },
        ],
        categoryType: [
          {
            required: true,
            message: "选择展示对象",
            trigger: "change",
          },
        ],
        sort: [
          {
            required: true,
            type: "number",
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
      // 二级
      formSecond: {
        msgCustCategoryId: "",
        custMess: "",
        replayMess: "",
        sort: "",
      },

      ruleSecond: {
        custMess: [
          {
            required: true,
            message: "请输入提问问题",
            trigger: "blur",
          },
        ],
        replayMess: [
          {
            required: true,
            message: "请输入解答问题",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            type: "number",
            message: "请输入排序",
            trigger: "blur",
          },
        ],
      },
      userId: JSON.parse(Cookies.get("userInfo")).id,
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "sort", // 默认排序字段
        order: "asc", // 默认排序方式
      },
      modifydata: "",
      total: 0, // 表单数据总数
      dictMessageType: this.$store.state.dict.messageType,
      gettation: [],
      secondLevel: [],
      ModifyCtegory: false,
      formCtegory: {
        replayPrimary: "",
        Secondary: "",
        categoryType: "",
      },

      categoryTypeList: [
        { value: "0", label: "货主" },
        { value: "1", label: "驾驶员" },
        { value: "2", label: "平台" },
        { value: "3", label: "全部" },
      ],
      ruleCtegory: {
        Secondary: [
          {
            required: true,
            message: "请输入二级类目",
            trigger: "blur",
          },
        ],
        replayPrimary: [
          {
            required: true,
            message: "请输入一级类目",
            trigger: "blur",
          },
        ],
        categoryType: [
          {
            required: true,
            message: "选择展示对象",
            trigger: "change",
          },
        ],
      },
      titleCtegory: "修改一级类目",
      ACtegortiem: [],
      ModifyL: 1,
      onel: false,
      twoL: false,
      twoList: [],
      arrOne: [],
      arrTwo: [],
      MenuaOne: true,
      htmls: "",
    };
  },
  methods: {
    Contrgo() {
      this.$router.go(-1);
    },
    init() {
      this.getDataList();
    },
    getDataList() {
      this.arrOne = [];
      this.arrTwo = [];
      this.MenuaOne = false;
      this.$nextTick(() => {
        this.MenuaOne = true;
      });
      this.searchForm.userId = this.userId;
      getMsgCustCategoryList(this.searchForm).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.result.content.length > 0) {
            this.gettation = res.result.content;
          } else {
            this.gettation = [];
          }
        } else {
        }
      });
    },

    // 点击二级
    MenuIsecond(val) {
      this.secondLevel.forEach((e) => {
        if (e.id == val) {
          this.Ruletitle = "《" + e.custMess + "》";
          this.htmls = `http://47.92.248.46:8089` + e.replayMess;
          this.Ruleimod = true;
        }
      });
    },
    dblclicktew() {},
    // 点击一级
    MenuItclck(val, num) {
      this.Secondary = false;
      this.$nextTick(() => {
        this.Secondary = true;
      });
      this.Menutwo = false;
      this.editorContent = "";
      this.arrTwo = [];
      if (num == 2) {
        this.arrOne = [];
      }
      this.arrOne.push({
        val: val,
      });

      this.gettation.forEach((item) => {
        if (item.id == val) {
          this.categoryone = item;
        }
      });
      this.editorContent = "";
      this.modify = true;
      this.searchForm.msgCustCategoryId = val;
      this.bus.$emit("loading", true);
      getMsgCustMessIdList(this.searchForm).then((res) => {
        if (res.code != 200) {
          this.bus.$emit("loading", false);
        } else {
          this.bus.$emit("loading", false);
        }
        if (res.result.content.length > 0) {
          this.Menutwo = true;
          this.secondLevel = res.result.content;
        } else {
          this.secondLevel = [];
        }
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less">
.editorcss {
  margin-left: 3.4rem;
  margin-top: 3rem;
  height: 44rem;
}
.editorbut {
  margin-top: 20px;
  margin-left: 46.3rem;
}
.but {
  display: flex;
  margin-left: 15px;
}
.Menucss {
  margin-top: 3rem;
  height: 44rem;
}
.MenuItemCss {
  margin-left: 1rem;
}
.searche {
  height: 100%;
  width: 100%;
}
.MenuIspan {
  width: 93%;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivu-btn-text {
  border: 1px solid #eee;
}
// .replyinptu {
//   textarea.ivu-input {
//     border: 1px solid transparent;
//     outline: none;
//     border: none;
//     box-shadow: 0 0 0 2px transparent;
//     // border-bottom: 1.3px solid gainsboro;
//   }
// }
.iframe-css {
  margin-top: 49px;
  width: 700px;
  height: 700px;
  margin-left: 20px;
}
</style>